<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <cpn></cpn>
  <cpn>
<!--    1.获取子组件中的planguage-->
<!--    作用域插槽 slot-scope   2.5.x 以下版本需要使用template标签-->
    <template slot-scope="slot">
<!--      <span v-for="item in slot.data">{{item}}-</span>-->
      <span>{{slot.data.join('-')}}</span>
    </template>
  </cpn>
</div>

<template id="cpn">
  <div>
<!--    使用slot来定义一个插槽-->
    <slot v-bind:data="pLanguages">
      <ul>
        <li v-for="item in pLanguages">{{item}}</li>
      </ul>
    </slot>
  </div>
</template>


<script src="../js/vue.js"></script>


<script>
    const app = new Vue({
        el:'#app',
        data:{
            message:'你好呀'
        },
        components:{
          cpn:{
              template:'#cpn',
              data(){
                  return{
                      pLanguages:['JavaScript','C++','C#','Java','Python','Swift','ObjectC']
                  }
              }
          }
        },
    })
</script>

</body>
</html>